<template>
	<view class="wx-createGroup" :style="'height: calc(100vh - ' + windowTop + 'px)'">
		<watermark></watermark>
		<form >
			<input class="search-friends-input" placeholder="搜索昵称" @input="textareaInput" type="text" />
		</form>
		<view class="wx-createGroup-check"><uni-indexed-list-wx showSelect :showAdd="false" :listtop="listtop" :options="new_list" @click="bindClick"></uni-indexed-list-wx></view>
		<view style="height: 60px;"></view>
		<view class="wx-createGroup-foot">
			<view class="wx-btn" @click="createGroup" >
				完成
				<text v-if="select.length > 0">({{ select.length }})</text>
			</view>
		</view>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			queryParams: {
				refreshing: false,
				status: 'more',
				pageNum: 1,
				pageSize: 20
			},
            keywords:'',
            listtop:{},
			list: [],
			new_list: [],
			select: [],
			windowTop: 0,
            is_submit:0,
            user_type:'member',
			groupId: ''
		};
	},
	onLoad(e) {
        this.user_type = e.user_type;
		this.groupId = e.groupId;
        if(this.user_type!='member'){
            this.listtop={
                itemIndex:-1,
                key:'',
                title:'',
                items:[{	
                    checked: false,
                    itemIndex:-1,
                    key:'',
                    data:{
        				name: '所有人',avatar: '/static/wx/n03.png',
        				userId: 'all',
        				addtype: 'N',checked: false,
                    }
                }],	
        	};
        }
	},
	mounted() {
		this.queryParams.refreshing = true;
		this.getList('');
		uni.getSystemInfo({
			success: res => {
				this.windowTop = res.windowTop;
			}
		});
	},
	onReachBottom() {
		this.getList('');
	},
	methods: {
		createGroup() {
			if(this.select.length<=0){
				uni.showToast({
					title:'未选择',
					icon:'none'
				})
				return
			}
			var ids = [],names=[];
			for (var i = 0; i < this.select.length; i++) {
				ids.push(this.select[i].data.userId);
				names.push(this.select[i].data.name);
			}
            var data={ids:ids.join(','),names:names.join(',')};
            this.$fc.changeData(1,data);
            uni.navigateBack();
		},
		bindClick(e) {
            this.select = e.select;
            if(e.item && e.item.itemIndex && e.item.itemIndex==-1){
                this.createGroup();
            }
		},
        textareaInput(e){
            this.keywords = e.detail.value;
            this.getNewlist();
        },
        getNewlist(){
            var datalist = [];
            if(this.keywords){
                for(var i in this.list){
                    if(this.list[i].name && this.list[i].name.indexOf(this.keywords)>-1){
                        datalist.push(this.list[i]);
                    }
                }
            }else{
                datalist=this.list;
            }
            this.new_list = this.$fc.sortList({ list: datalist, key: 'name' });
        },
		getList(e){
			uni.showLoading();
			this.queryParams.status = 'loading'
			this.$fc.loadMore({
				url: '/group/get_group_ulist?groupId='+this.groupId,
				queryParams: this.queryParams
			}).then(res => {
				this.queryParams = res.queryParams;
				if (res.status == '3') {
					this.list = [];
					this.new_list = this.$fc.sortList({ list: this.list, key: 'name' });
					return
				}
				if (res.status == '0') {
					return
				}
				var rows = res.list;
				var list = [];
				for (var i = 0; i < rows.length; i++) {
					var item = rows[i];
					if (item.userType == 'normal') {
    					list.push({
    						name: item.name,
    						avatar: item.avatar,
    						userId: item.userId,
    						addtype: 'N',
    						checked: false
    					});
                    }
				}
				if (res.status == '2') {
					this.list = list;
				}
				if (res.status == '1') {
					this.list = this.list.concat(list);
				}
				this.getNewlist();
			});
		},
	}
};
</script>

<style scoped>
.search-friends-input{
	margin:20rpx 24rpx 0rpx 24rpx;
	margin-bottom: 20rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	background-color: #F7F7F7;
	border-radius: 10rpx;
}

.wx-createGroup {
	display: flex;
	flex-direction: column;
}
.wx-createGroup-check {
	height: 90%;
	position: relative;
}
.wx-createGroup-foot {
	width: 100%;
	height: 60px;
	line-height: 60px;
	background-color: #eee;
	position: fixed;
	bottom: 0;
	left: 0;
	text-align: right;
}
.wx-btn {
	height: 40px;
	line-height: 40px;
	min-width: 200rpx;
	text-align: center;
	border-radius: 12rpx;
	background-color: #05c160;
	color: #fff;
	font-size: 32rpx;
	display: inline-block;
	margin-top: 10px;
	margin-right: 20rpx;
}
</style>
